
import 'package:flu_framework/ui/home/pages/overlays/guide_popup.dart';
import 'package:flustars_flutter3/flustars_flutter3.dart';
import 'package:flutter/material.dart';

import '../../../common/my_popup/my_popup.dart';
import 'overlays/drop_down_menu.dart';

class OverlayPage extends StatefulWidget {
  const OverlayPage({Key? key}) : super(key: key);

  @override
  State<OverlayPage> createState() => _OverlayPageState();
}

class _OverlayPageState extends State<OverlayPage> {
  GlobalKey key1 = new GlobalKey(),
      key2 = new GlobalKey(),
      key3 = new GlobalKey(),
      key4 = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50),
        child: AppBar(
          title: Text('EasyPopup'),
        ),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            GestureDetector(
              key: key1,
              behavior: HitTestBehavior.opaque,
              onTap: _showDropDownMenu,
              child: Container(
                color: Colors.blueAccent,
                alignment: Alignment.center,
                width: 200,
                height: 50,
                child: Text(
                  'ShowDropDownMenu',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            GestureDetector(
              key: key2,
              behavior: HitTestBehavior.opaque,
              onTap: _showGuidePopup,
              child: Container(
                width: 200,
                height: 50,
                color: Colors.blueAccent,
                alignment: Alignment.center,
                child: Text(
                  'ShowGuidePopup',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            GestureDetector(
              key: key3,
              behavior: HitTestBehavior.opaque,
              onTap: _showMultiHiglightsGuidePopup,
              child: Container(
                width: 200,
                height: 50,
                color: Colors.blueAccent,
                alignment: Alignment.center,
                child: Text(
                  'ShowMultiHighlightPopup',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  _showDropDownMenu(){
     MyPopup.show(
         context, DropDownMenu(),
         offsetLT: Offset(0, ScreenUtil.getStatusBarH(context)+56)
     );
  }

  _showGuidePopup(){
      RenderBox box = key1.currentContext?.findRenderObject() as RenderBox;
      Offset offset = box.localToGlobal(Offset.zero);
      double left = offset.dx - 5;
      double top = offset.dy - 5;
      double width = box.size.width + 10;
      double height = box.size.height + 10;
      List<RRect> highlights = [
        RRect.fromRectAndRadius(
          Rect.fromLTWH(left,top,width,height),
          Radius.circular(10),
        ),
      ];
      MyPopup.show(
        context,
        GuidePopup([key1,key2]),
        cancelable: false,
        highlights: highlights,
        duration: Duration(milliseconds: 100),
      );
  }

  _showMultiHiglightsGuidePopup(){
     List<GlobalKey> keys = [key1,key2,key3];
     List<RRect> highlights = [];
     for(GlobalKey key in keys){
        RenderBox box = key.currentContext?.findRenderObject() as RenderBox;
        Offset offset = box.localToGlobal(Offset.zero);
        double left = offset.dx - 5;
        double top = offset.dy - 5;
        double width = box.size.width + 10;
        double height = box.size.height + 10;
        highlights.add(
          RRect.fromRectAndRadius(
            Rect.fromLTWH(left, top, width, height),
            Radius.circular(10),
          ),
        );
     }
     MyPopup.show(
       context,
       GuidePopup([key1]),
       cancelable: false,
       highlights: highlights,
       duration: Duration(milliseconds: 100),
     );
  }
}
